#container {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(46deg, #e8fffd, rgb(255, 255, 255));
}


#card{
    position: relative;
    
	height: 560px;
	width: 400px;
	border: 2px solid rgb(169, 238, 255);
	border-radius: 10px;
    transform-style: preserve-3d;
    transform-origin: left;
	box-shadow: 0 0 2px 4px rgb(237, 246, 247) inset, 4px 4px 6px 6px #ecfffd, -2px -2px 6px 6px #e5fffd;
}

#img_box{
    position: absolute;
    top: 0;
    left: 0;
	height: 560px;
	width: 400px;
	border: 2px solid rgb(169, 238, 255);
	border-radius: 10px;
    transform-style: preserve-3d;
    transform-origin: left;
	box-shadow: 0 0 2px 4px rgb(237, 246, 247) inset, 4px 4px 6px 6px #ecfffd, -2px -2px 6px 6px #e5fffd;
	/* background-color: rgb(228, 255, 248); */
    transition: all 1s ease-in-out;
    
}

#img_box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 10px;
    z-index: 1000;
    
}

#img_box img:nth-child(2){
    transform: rotateY(180deg);
}
#card:hover #img_box{
    transform: rotateY(-180deg);
}

#card:hover #show_box{
    display: block;
}

#word1{
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 28px;
    font-weight: 700;
    transition: all 1s ease-in-out;
}

#word2{
    position: absolute;
    top:50%;
    left: 70%;
    transform: translate(-50%,-50%);
    font-size: 22px;
    font-weight: 700;
    font-family:'北方行书';
    transition: all 1s ease-in-out;
}

#back{
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%,-50%);
    height: 50px;
    width: 50px;
}

#qq{
    position: absolute;
    top: 75%;
    left: 30%;
    transform: translate(-50%,-50%);
    height: 45px;
    width: 45px;transition: all 1s ease-in-out;
}
#weixin{
    position: absolute;
    top: 75%;
    left: 70%;
    transform: translate(-50%,-50%);
    height: 45px;
    width: 45px;
    transition: all 1s ease-in-out;
}

#detail{
    transition: all 1s ease-in-out;
    z-index: 100;
    position: relative;
    top: 0;
    left: 0;
	height: 560px;
	width: 400px;
	border: 2px solid rgb(215, 247, 255);
	border-radius: 10px;
	box-shadow: 0 0 2px 4px rgb(237, 246, 247) inset, 4px 4px 6px 6px #ecfffd, -2px -2px 6px 6px #e5fffd;
}

#show_box{
    display: none;
    transition: all 1s ease-in-out;
}

#detail img{
    cursor: pointer;
}

#erweima{
    display: none;
    position: absolute;
    top: 50%;
    left: 101%;
    transform: translate(0%,-50%);
	height: 560px;
	width: 400px;
	border: 2px solid rgb(215, 247, 255);
	border-radius: 10px;
	box-shadow: 0 0 2px 4px rgb(237, 246, 247) inset, 4px 4px 6px 6px #ecfffd, -2px -2px 6px 6px #e5fffd;
}

#erweima #simg1{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 380px;
    width: 260px;
}

#erweima #simg2{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 380px;
    width: 260px;
}

#next_web {
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('../imgs/down.png');
	background-size: 100%;
	height: 60px;
	width: 60px;
	transition: all 0.5s linear;
}

#next_web:hover {
	bottom: 1%;
}